<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/api/favicon">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <title>大学生心理健康评估</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: "montserrat";
            background-image: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);
            /* background-image: linear-gradient(125deg,#5BC0EB,#FDE74C,#9BC53D,#E55934,#FA7921); */
            background-size: 400%;
            animation: bganimation 15s infinite;
        }

        .text {
            color: white;
            text-align: center;
            text-transform: uppercase;
            margin: 50px 0;
            font-size: 22px;
        }

        .logo {
            width: 550px;
            background-color: rgb(80, 80, 80);
            text-align: center;
            vertical-align: middle;
            opacity: 0.9;
            border-radius: 20px;
        }

        @keyframes bganimation {
            0% {
                background-position: 0 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0 50%;
            }
        }

        #app {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .login_box {
            width: 460px;
            padding: 40px 40px 30px 40px;
            background-color: #ffffff;
            border-radius: 6px;
            box-shadow: 0 0 10px #333;
        }

        .title {
            margin: 0 0 0 -58px;
            padding: 16px 10px 16px 60px;
            background: #27A9E3;
            position: relative;
            color: #fff;
            font-size: 20px;
        }

        #darkbannerwrap {
            background: url(https://assets-1259037473.cos.ap-chengdu.myqcloud.com/images/aiwrap.png);
            width: 18px;
            height: 10px;
            margin: 0 0 20px -58px;
            position: relative;
        }

        .el-form-item__content {
            display: flex;
        }

        .el-tab-pane {
            position: relative;
        }

        .el-tab-pane > .el-button {
            position: absolute;
            bottom: -5px;
            right: 15px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="text">
        Hello, please love yourself
    </div>
    <div class="logo login_box">
        <div class="title">大学生心理健康评估</div>
        <div id="darkbannerwrap"></div>
        <el-tabs stretch v-model="tab">
            <el-tab-pane label="登 录" name="login">
                <el-form label-width="70px" :model="login_form" :rules="rules">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="login_form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="login_form.pwd" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button plain @click="login">立即登录</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="text" @click="forget">忘记密码</el-button>
            </el-tab-pane>
            <el-tab-pane label="注 册" name="register">
                <el-form label-width="70px" :model="reg_form" :rules="rules">
                    <el-form-item label="昵称">
                        <el-input v-model="reg_form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="reg_form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input v-model="reg_form.code"></el-input>
                        <el-button style="min-width: 110px;" @click="get_auth_code">[[
                            auth_code.state?'获取验证码':auth_code.count_down ]]
                        </el-button>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="reg_form.pwd1" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="reg_form.pwd2" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button plain @click="register">立即注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            tab: 'login',
            rules: {
                email: [
                    {type: 'email', message: '格式不对', trigger: 'blur'}
                ],
            },
            login_form: {
                email: "",
                pwd: ""
            },
            reg_form: {
                name: "",
                code: "",
                email: "",
                pwd1: "",
                pwd2: ""
            },
            auth_code: {
                state: true,
                count_down: 0,
                interval: NaN
            },
        },
        mounted: function () {

        },
        methods: {
            {#获取验证码#}
            get_auth_code() {
                if (this.auth_code.state) {
                    if (this.reg_form.email && /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.reg_form.email)) {
                        let params = new FormData();
                        params.append('email', this.reg_form.email)
                        params.append('action', 'auth_code')
                        const loading = this.$loading({
                            lock: true,
                            text: '发送中……',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255, 255, 255, 0.7)'
                        });
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                this.auth_code.count_down = 30
                                this.auth_code.state = false
                                this.auth_code.internal = setInterval(() => {
                                    this.auth_code.count_down -= 1
                                    if (this.auth_code.count_down === 0) {
                                        clearInterval(this.auth_code.internal)
                                        this.auth_code.state = true
                                    }
                                }, 1000)
                                loading.close()
                                swal({
                                    title: '发送成功',
                                    icon: "success",
                                    timer: 800
                                })
                            } else {
                                loading.close()
                                swal({
                                    title: '发送失败',
                                    icon: "error",
                                })
                            }
                        })
                    } else {
                        this.$message({
                            message: '邮箱错误！',
                            type: 'warning'
                        });
                    }
                }
            },
            {#登录#}
            login() {
                {#判断邮箱格式#}
                if (/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.login_form.email)) {
                    if (this.login_form.pwd) {
                        let param = new FormData();
                        param.append('email', this.login_form.email);
                        param.append('pwd', this.login_form.pwd);
                        param.append('action', 'login');
                        axios.post('', param).then(res => {
                            console.log(res.data);
                            if (res.data.state) {
                                swal({
                                    title: '登陆成功',
                                    icon: "success",
                                    timer: 800
                                }).then(() => {
                                    Cookies.set('uid', res.data.uid);
                                    window.location.href = '/'
                                })
                            } else {
                                swal('登陆失败', res.data.msg, "error")
                            }
                        })
                    } else {
                        this.$message({
                            message: '请填写密码！',
                            type: 'warning'
                        });
                    }
                } else {
                    this.$message({
                        message: '邮箱格式错误！',
                        type: 'warning'
                    });
                }

            },
            {#注册#}
            register() {
                {#判断数据是否完整#}
                if (this.reg_form.name && this.reg_form.email && this.reg_form.pwd1 && this.reg_form.pwd2) {
                    {#判断邮箱格式#}
                    if (/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.reg_form.email)) {
                        if (this.reg_form.pwd1 === this.reg_form.pwd2) {
                            let params = new FormData();
                            params.append('name', this.reg_form.name)
                            params.append('pwd', this.reg_form.pwd1)
                            params.append('email', this.reg_form.email)
                            params.append('code', this.reg_form.code)
                            params.append('action', 'register')
                            axios.post('', params).then(res => {
                                if (res.data.state) {
                                    swal({
                                        title: '注册成功',
                                        icon: "success",
                                        timer: 800
                                    }).then(
                                        location.reload()
                                    )
                                } else {
                                    swal('注册失败', res.data.msg, "error")
                                }
                            })
                        } else {
                            this.$message({
                                message: '密码不一致！',
                                type: 'warning'
                            });
                        }
                    } else {
                        this.$message({
                            message: '邮箱格式错误！',
                            type: 'warning'
                        });
                    }
                } else {
                    this.$message({
                        message: '请填写完整！',
                        type: 'warning'
                    });
                }
            },
            {#忘记密码#}
            forget() {
                if (/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.login_form.email)) {
                    let param = new FormData();
                    param.append('email', this.login_form.email);
                    param.append('action', 'forget');
                    const loading = this.$loading({
                        lock: true,
                        text: '发送中……',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255, 0.7)'
                    });
                    axios.post('', param).then(res => {
                        console.log(res.data);
                        loading.close()
                        if (res.data.state) {
                            swal({
                                title: '获取成功',
                                icon: "success",
                                timer: 800
                            })
                        } else {
                            loading.close()
                            swal('获取失败', res.data.msg, "error")
                        }
                    })
                } else {
                    this.$message({
                        message: '邮箱格式错误！',
                        type: 'warning'
                    });
                }
            }
        }
    });
</script>
</body>
</html>
